@extends('layouts.mobile_main')

@section('title', '绑定手机')

@section('resources')
    @parent
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}/css/public.css?v={{env('CSS_VERSION')}}">
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
@endsection

@section('content')
<div class="paysu_outer">
	<header class="pay_detail oh" style="background-color: #fff;">
		<a class="fl" href="javascript:history.go(-1);">
		  <img class="fl" src="{{env('IMAGE_DOMAIN')}}/images/back_p.png?v={{env('IMAGE_VERSION')}}" alt="">
        </a>
		<span class="fl co_violet fz_48">绑定手机号</span>
	</header>
	<section id="num_form1">
		<p class="fz_40 co_gray" style="margin: 0.4rem 0.9rem;">你已绑定<span class="co_violet">{{$mobile}}</span>的手机号，更换手机号需先验证原手机号后绑定新手机号。</p>
		<form method="post" action="#" class="pay_idcheck_form">
			<ul>
				<li class="oh">
					<span class="fz_44 fl">原手机号</span>
					<input class="fl fz_40" type="text" id="before1" name="old_mobile" placeholder="请输入已绑定的手机号" onpropertychange="check1();" oninput="check1();" maxlength="15" />
				</li>
			</ul>
			
		</form>
		<input type="submit" value="下一步" id="entry_sub1" class="entry_sub">
	</section>
	<section id="num_form2" style="display: none;">
		<p class="fz_40 co_gray" style="margin: 0.4rem 0.9rem;">请输入您的手机号<span class="co_violet" id="send_mobile"></span>收到的验证码</p>
		<form method="post" action="#" class="pay_idcheck_form">
			<ul>
				<li class="oh">
					<span class="fz_44 fl">验证码</span>
					<input class="fl fz_40" style="width: 4.5rem;" id="before2" type="text" name="old_code" placeholder="请填写验证码" onpropertychange="check2();" oninput="check2();">
					<span class="fz_40 fl co_gray" id="seconds1" style="margin-left: 20px;border-left: 1px solid #eee;padding-left: 0.5rem;">剩余60秒</span>
				</li>
			</ul>
		</form>
		<input type="submit" value="更换手机号" id="entry_sub2" class="entry_sub">
	</section>
	<section id="num_form3" style="display: none;">
		<p class="fz_40 co_gray" style="margin: 0.4rem 0.9rem;">请填写新的手机号</p>
		<form method="post" action="#" class="pay_idcheck_form">
			<ul>
				<li class="oh">
					<span class="fz_44 fl">手机号</span>
					<input class="fl fz_40" type="text" id="before3" name="new_mobile" placeholder="请输入手机号" onpropertychange="check3();" oninput="check3();" maxlength="15" />
				</li>
			</ul>
		</form>
		<input type="submit" value="下一步" id="entry_sub3" class="entry_sub">
	</section>
	<section id="num_form4" style="display: none;">
		<p class="fz_40 co_gray" style="margin: 0.4rem 0.9rem;">请输入您的手机号<span class="co_violet">18270880389</span>收到的验证码</p>
		<form method="post" action="#" class="pay_idcheck_form">
			<ul>
				<li class="oh">
					<span class="fz_44 fl">验证码</span>
					<input class="fl fz_40" style="width: 4.5rem;" id="before4" type="text" name="new_code" placeholder="请填写验证码" onpropertychange="check4();" oninput="check4();">
					<span class="fz_40 fl co_gray" id="seconds2" style="margin-left: 0;border-left: 1px solid #eee;padding-left: 0.5rem;">剩余60秒</span>
				</li>
			</ul>
		</form>
		<input type="submit" value="绑定" id="entry_sub4" class="entry_sub">
	</section>
</div>
@endsection

@section('scriptResources')
    @parent
    <script>
        window.onresize=function(){
            pagesp();
        }
        function check1(){
            var phone=$("#before1").val();
            if(phone!=0){
                $("#entry_sub1").css("background-color","#9a54c6");
                $("#entry_sub1").click(function(){
                    phone=$("#before1").val();
                    var myreg=/^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                    if(phone==""){
                        $(".prompt").html("手机号码不能为空");return;
                    }else if(phone.length!=11){
                        $(".prompt").html("请输入有效的手机号码1");return;
                    }else if(!myreg.test(phone)){
                        $(".prompt").html("请输入有效的手机号码2");return;
                    }
                })
            }else{
                $("#entry_sub1").css("background-color","#ccc");
                $("#entry_sub1").removeAttr("disable");
            }
        }
        function check3(){
            var phone=$("#before3").val();
            if(phone!=0){
                $("#entry_sub3").css("background-color","#9a54c6");
                $("#entry_sub3").click(function(){
                    phone=$("#before3").val();
                    var myreg=/^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                    if(phone==""){
                        $(".prompt").html("手机号码不能为空");return;
                    }else if(phone.length!=11){
                        $(".prompt").html("请输入有效的手机号码1");return;
                    }else if(!myreg.test(phone)){
                        $(".prompt").html("请输入有效的手机号码2");return;
                    }
                })
            }else{
                $("#entry_sub3").css("background-color","#ccc");
                $("#entry_sub3").removeAttr("disable");
            }
        }
        function check2(){
            var phone=$("#before2").val();
            if(phone!=0){
                $("#entry_sub2").css("background-color","#9a54c6");
            }else{
                $("#entry_sub2").css("background-color","#ccc");
                $("#entry_sub2").removeAttr("disable");
            }
        }
        function check4(){
            var phone=$("#before4").val();
            if(phone!=0){
                $("#entry_sub4").css("background-color","#9a54c6");
            }else{
                $("#entry_sub4").css("background-color","#ccc");
                $("#entry_sub4").removeAttr("disable");
            }
        }
        function forcheck (id,check) {
            //firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。   
            if(/msie/i.test(navigator.userAgent))    //ie浏览器   
                {document.getElementById(id).onpropertychange=check   
            } else{//非ie浏览器，比如Firefox   
                document.getElementById(id).addEventListener("input",check,false);   
            }   
        }
        forcheck('before1',check1);
        forcheck('before2',check2);
        forcheck('before3',check3);
        forcheck('before4',check4);
        $(function(){
            var timer=null,seconds=60;
            var paysu_outer_h=$(window).height();
            $(".paysu_outer").css({"min-height":paysu_outer_h});
            $("#entry_sub1").click(function(){
                var mobile = $("#num_form1 input[name='old_mobile']").val();
                if(isNaN(mobile)||(mobile.length != 11)) {
                    alert("手机号码格式不对");return;
                }
                $("#send_mobile").text(mobile);
                //发送短信 请求ajax
                $.ajax({
                    url :"/mobile/mycenter/phone/captcha/get",
                    type:'POST',
                    data : {
                        'mobile':mobile,
                        'type': 'old'
                        },
                    dataType:'json',
                    async:false,
                    success:function(data){
                        if (data.status == "success") {
                            //alert(data.message);
                             $("#num_form1").hide();
                             $("#num_form2").show();
                            timer=setInterval(function (){
                                seconds--;
                                if(seconds<0){
                                    $("#seconds1").html("语音验证码");
                                    $("#seconds1").css("color","#9a54c6");
                                    seconds=0;
                                    clearInterval(timer);
                                    return false;
                                }
                                $("#seconds1").html("剩余"+seconds+"秒");
                                $("#seconds1").css("color","#808080");
                            },1000)
                        } else {
                            alert(data.message);
                            return;
                        }
                    }
                });
            })
            $("#seconds1").click(function () {
                if ($("#seconds1").html() == "语音验证码") {
                    seconds=60;
                    var mobile = $("#num_form1 input[name='old_mobile']").val();
                    $.ajax({
                        url :"/mobile/mycenter/phone/captcha/get",
                        type:'POST',
                        data : {
                            'mobile':mobile,
                            'type': 'old'
                            },
                        dataType:'json',
                        async:false,
                        success:function(data){
                            if (data.status == "success") {
                                //alert(data.message);
                                 $("#num_form1").hide();
                                 $("#num_form2").show();
                                timer=setInterval(function (){
                                    seconds--;
                                    if(seconds<0){
                                        $("#seconds1").html("语音验证码");
                                        $("#seconds1").css("color","#9a54c6");
                                        seconds=0;
                                        clearInterval(timer);
                                        return false;
                                    }
                                    $("#seconds1").html("剩余"+seconds+"秒");
                                    $("#seconds1").css("color","#808080");
                                },1000)
                            } else {
                                alert(data.message);
                                return;
                            }
                        }
                    });
                };
            })
            $("#entry_sub2").click(function(){
                //验证短信验证码
                var old_mobile = $("input[name='old_mobile']").val();
                var old_code = $("input[name='old_code']").val();
                $.ajax({
                    url :"/mobile/mycenter/phone/captcha/verify",
                    type:'POST',
                    data : {
                        'mobile':old_mobile,
                        'code':old_code
                        },
                    dataType:'json',
                    async:false,
                    success:function(data){
                        if (data.status == "success") {
                             $("#num_form2").hide();
                             $("#num_form3").show();
                        } else {
                            alert(data.message);
                        }
                    }
                });
            })
            $("#entry_sub3").click(function(){
                $("#num_form3").hide();
                $("#num_form4").show();
                var new_mobile = $("input[name='new_mobile']").val();
                if(isNaN(new_mobile) || (new_mobile.length != 11)) {
                    alert("手机号码格式不对");return;
                }
                $.ajax({
                    url :"/mobile/mycenter/phone/captcha/get",
                    type:'POST',
                    data : {
                        'mobile':new_mobile,
                        'type':'new'
                        },
                    dataType:'json',
                    async:false,
                    success:function(data){
                        if (data.status == "success") {
                            timer=setInterval(function (){
                                seconds--;
                                if(seconds<0){
                                    $("#seconds2").html("语音验证码");
                                    $("#seconds2").css("color","#9a54c6");
                                    seconds=0;
                                    clearInterval(timer);
                                    return false;
                                }
                                $("#seconds2").html("剩余"+seconds+"秒");
                                $("#seconds2").css("color","#808080");
                            },1000)
                            //alert(data.message);
                        } else {
                            //alert(data.message);
                        }
                    }
                });
            })
            $("#seconds2").click(function () {
                if ($("#seconds2").html() == "语音验证码") {
                    seconds=60;
                    var new_mobile = $("input[name='new_mobile']").val();
                    $.ajax({
                        url :"/mobile/mycenter/phone/captcha/get",
                        type:'POST',
                        data : {
                            'mobile':mobile,
                            'type': 'old'
                            },
                        dataType:'json',
                        async:false,
                        success:function(data){
                            if (data.status == "success") {
                                //alert(data.message);
                                 $("#num_form1").hide();
                                 $("#num_form2").show();
                                timer=setInterval(function (){
                                    seconds--;
                                    if(seconds<0){
                                        $("#seconds2").html("语音验证码");
                                        $("#seconds2").css("color","#9a54c6");
                                        seconds=0;
                                        clearInterval(timer);
                                        return false;
                                    }
                                    $("#seconds2").html("剩余"+seconds+"秒");
                                    $("#seconds2").css("color","#808080");
                                },1000)
                            } else {
                                alert(data.message);
                                return;
                            }
                        }
                    });
                };
            })
            $("#entry_sub4").click(function(){
                var new_mobile = $("input[name='new_mobile']").val();
                if(isNaN(new_mobile) || (new_mobile.length != 11)) {
                    alert("手机号码格式不对");return;
                }
                var old_mobile = $("input[name='old_mobile']").val();
                var new_code = $("input[name='new_code']").val();
                $.ajax({
                    url :"/mobile/mycenter/phone/update",
                    type:'POST',
                    data : {
                        'old_mobile':old_mobile,
                        'new_mobile':new_mobile,
                        'new_code':new_code
                        },
                    dataType:'json',
                    async:false,
                    success:function(data){
                        if (data.status == "success") {
                            window.location.href = '/mobile/mycenter/account/security';
                        } else {
                            alert(data.message);
                        }
                    }
                });
            })
        })
    </script>
@endsection